import React, { useState, useEffect } from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from '../../utils/index'
import './index.css'
import { Tabs } from 'react-vant'
function index() {
  const navigate = useNavigate()
  const back = () =>
    Toast.show({
      content: navigate(-1),
      duration: 1000,
    })


  const fx = async () => {
    try {
      await navigator.share({
        title: document.title,
        text: 'Check out this amazing React content!',
        url: window.location.href
      });
    } catch (err) {
      console.error('Error sharing:', err);
    }
  }


  useEffect(() => {
    // 检查浏览器是否支持navigator.share
    if (!navigator.share) {
      console.log('Browser does not support native sharing.');
    }
  }, []);


  const phoneNumber = '15530175278';

  const tel = () => {
    const phoneNumber = '1234567890';
    window.location.href = `tel:${phoneNumber}`;
  }


  const [tab, setLTab] = useState<any>([])
  useEffect(() => {
    const Tablist = async () => {
      const res = await axios.get('/api/list')
      console.log(res);
      setLTab(res.data.list)
      console.log(res.data.list);
    }
    Tablist()
  }, [])





  const items = ['全部', '分类']
  return (
    <div>
      <div className='dianbaox'>

        <div className='navbox'>
          <NavBar onBack={back} className='diandian'></NavBar>
        </div>
        <div className='searcjcenter'>
          <input type="text" placeholder='搜索店铺内商品' className='search' />
        </div>
        <div className='turight'>
          <img src="../src/assets/45.jpg" alt="" onClick={fx} />
        </div>
      </div>
      <div className='box57'>
        <div className="left58">
          <img src="../src/assets/44.jpg" alt="" />
        </div>
        <div className="center58">
          <p className='p58'>微脉心选官方自营
            <span className='span58'>
             <p>地址: 浙江省杭州市</p>
            </span>
          </p>
        </div>
        <div className="right58">
         
        </div>
      </div>

      <div className='zi57'>
        <div className="left57">
          <p className='p57'>优惠 <span className='span57'> 卷100 卷50</span> 共6个</p>
        </div>
        <div className="right57">
       
        </div>
      </div>
      <div className='zi57'>
        <div className="left57">
          <p className='p57'>营业时间 <span className='span57'>0:00-24:00</span>(人工客服: 9:00-18:00) </p>
        </div>
        <div className="right57" onClick={tel}>
          <a href={`tel:${phoneNumber}`}>
            <img src="../src/assets/46.jpg" alt="" className='imgdiaha' />
          </a>
        </div>
      </div>
      <div className='zi58'>
        <div className='zileft'>
          <Tabs defaultActive={2}>
            {items.map(item => (
              <Tabs.TabPane key={item} title={item}>
                {/* 下划线标签页 {item} */}
              </Tabs.TabPane>
            ))}
          </Tabs>
        </div>
        <div className='ziright'>
          {
              tab && tab.map((item: any, index: number) =>{
                  return <div key={index} className='tabdiv1'>
                       <img src={item.img1} alt="" className='imaagheqq' />
                       <h3 className='h3qq'>￥{item.price}</h3>
                       <span>{item.title}</span>
                  </div>
              })
          }
        </div>
      </div>
    </div>
  )
}

export default index